
{%- liquid
  assign show_bg = true
  assign bg_full = false
  if section.settings.padding_to_full_section
    assign bg_full = true
  endif
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_bg = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-start row'
    when 'center'
      assign text_alignment = 'text-center justify-content-center row'
    else
      assign text_alignment = ''
  endcase

  case section.settings.text_position
    when 'split'
      assign splited = true
    when 'stacked'
      assign splited = false
  endcase
-%}

{%- liquid
  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = 'lead'
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase
-%}

{%- liquid
  assign pad_top = section.settings.section_padding_top
  assign padding_set = section.settings.section_padding_bottom | append: ' ' | append: pad_top

  if show_bg and bg_full
    assign pad_top = section.settings.section_padding_top
    assign padding_set = section.settings.section_padding_bottom | append: ' ' | append: pad_top
  else
    assign mar_top = section.settings.section_padding_top | replace: 'p', 'm'
    assign mar_btm = section.settings.section_padding_bottom | replace: 'p', 'm'
    assign margin_set = mar_btm | append: ' ' | append: mar_top
  endif 
-%}

<div class="{% if show_bg and bg_full %} {{ padding_set }} {{ background_color }}{% else %}{{ margin_set }}{% endif %}">
  <div class="container">
    <div class="{% unless bg_full %}{{ background_color }}{% endunless %}">
    <div class="{% unless bg_full %}{% if show_bg %}py-7 py-lg-9 px-5 px-lg-7{% endif %}{% endunless %} {{ text_alignment }}">
      <div class="col-12 {{ text_color }} {%- unless section.settings.wide_display -%}{{ section.settings.text_width }}{% endunless %}">
        {% if splited %}
          <div class="d-md-flex align-items-center justify-content-center">
            <div class="">
        {% endif %}
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when 'overline' -%}
                  {%- if block.settings.overline != blank -%}
                    <p class="{% if forloop.first %}mt-0{% endif %} {% if forloop.last %}mb-0{% else %}mb-2{% endif %}">{{ block.settings.overline }}</span></p>
                  {%- endif -%}
                  {%- when 'heading' -%}
                    {%- if block.settings.heading != empty -%}
                      {% if block.settings.enable_adjust_h_tag %}
                        {% assign mark = block.settings.adjust_h_tag_to %}
                      {% endif %}
                      <{{ mark }} class="{{ section.settings.fontsize }} fw-bold {% if forloop.first %}mt-0{% endif %} {% if forloop.last %}mb-0{% else %}mb-2{% endif %}">{{ block.settings.heading }}</{{ mark }}>
                    {%- endif -%}
                  {%- when 'text' -%}
                    {%- if block.settings.text != blank -%}
                      <div class="{{ bodysize }} fw-normal no-last-margin richtext-with-link {{ richtext_link_style }} {% if forloop.first %}mt-0{% endif %} {% if forloop.last %}mb-0{% else %}mb-2{% endif %}">
                        {{ block.settings.text }}
                      </div>
                    {%- endif -%}
                {%- when 'button' -%}
                  {%- unless splited -%}
                    {%- if block.settings.button_label != blank -%}
                      {% capture button_style %}
                        {%- liquid
                          case block.settings.button_style
                            when 'solid'
                              assign btn = 'btn-'
                            when 'outline'
                              assign btn = 'btn-outline-'
                            when 'link'
                              assign btn = 'btn-link link-'
                            endcase
                        -%}
                        {{ btn | append: btn_style | strip }}
                      {% endcapture %}
                      <div class="my-6 {% if forloop.first %}mt-0{% endif %}{% if forloop.last %}mb-0{% endif %}">
                        {%- if block.settings.button_link != blank -%}
                          <a {% render 'link', link: block.settings.button_link %} href="{{ block.settings.button_link }}" class="btn {{ button_style }} ">
                            {{ block.settings.button_label }}
                          </a>
                        {%- else -%}
                          <div class="btn {{ button_style }} disabled cursor-default">
                            {{ block.settings.button_label }}
                          </div>
                        {%- endif -%}
                      </div>
                    {%- endif -%}
                  {%- endunless -%}
              {%- endcase -%}
            {%- endfor -%}
        {% if splited %}
            </div>
            <div class="ms-0 ms-md-7 mt-6 mt-md-0 flex-shrink-0">
              <div class="my-n">
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'button' -%} 
                    {% capture button_style %}
                      {%- liquid
                        case block.settings.button_style
                          when 'solid'
                            assign btn = 'btn-'
                          when 'outline'
                            assign btn = 'btn-outline-'
                          when 'link'
                            assign btn = 'btn-link link-'
                          endcase
                      -%}
                      {{ btn | append: btn_style | strip }}
                    {% endcapture %}
                      {%- if block.settings.button_link != blank -%}
                        <a {% render 'link', link: block.settings.button_link %} href="{{ block.settings.button_link }}" class="{%- if block.settings.button_label != blank -%}btn {{ button_style }}{% else %}d-block{% endif %} my-1">
                        {%- if block.settings.button_label != blank -%}{{ block.settings.button_label }}{%- endif -%}
                        </a>
                      {%- else -%}
                        <div class="{%- if block.settings.button_label != blank -%}btn {{ button_style }}{% else %}d-block{% endif %}  my-1 disabled cursor-default">
                        {%- if block.settings.button_label != blank -%}{{ block.settings.button_label }}{%- endif -%}
                        </div>
                      {%- endif -%}
                {% endcase %}
              {%- endfor -%}
              {%- unless button_style -%}
                <a class="d-block my-1"></a>
              {%- endunless -%}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  </div>
</div>
{% schema %}
  {
    "name": "Rich text",
    "class": "richtext-sec",
    "tag": "section",
    "settings": [
      {
        "type": "select",
        "id": "text_position",
        "label": "Text and button position",
        "info": "Only work when text and button position is ‘Stacked’",
        "options": [
          {
            "value": "stacked",
            "label": "Stacked"
          },
          {
            "value": "split",
            "label": "Side by sides"
          }
        ],
        "default": "stacked"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Add background color to the full section",
        "default": false
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8",
            "label": "2/3"
          },
          {
            "value": "col-md-6",
            "label": "1/2"
          },
          {
            "value": "col-md-4",
            "label": "1/3"
          }
        ],
        "default": "col-md-6"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "white",
             "label": "White"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "checkbox",
        "id": "wide_display",
        "label": "Wide display",
        "default": false
      },
      {
        "type": "select",
        "id": "section_padding_top",
        "label": "Top padding",
        "options": [
          {
            "value": "",
            "label": "0"
          },
          {
            "value": "pt-lg-6 pt-5",
            "label": "40px"
          },
          {
            "value": "pt-lg-9 pt-6",
            "label": "96px"
          }
        ],
        "default": ""
      },
      {
        "type": "select",
        "id": "section_padding_bottom",
        "label": "Bottom padding",
        "options": [
          {
            "value": "",
            "label": "0"
          },
          {
            "value": "pb-lg-6 pb-5",
            "label": "40px"
          },
          {
            "value": "pb-lg-9 pb-6",
            "label": "96px"
          }
        ],
        "default": ""
      }
    ],
    "blocks": [
      {
        "type": "overline",
        "name": "Overline",
        "settings": [
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          }
        ]
      },
      {
        "type": "heading",
        "name": "Heading",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Rich text",
            "label": "Heading"
          },
          {
            "type": "checkbox",
            "id": "enable_adjust_h_tag",
            "label": "Enable adjust H tag",
            "default": false
          },
          {
            "type": "select",
            "id": "adjust_h_tag_to",
            "label": "Adjust the H tag to",
            "options": [
              {
                "value": "h1",
                "label": "H1"
              },
              {
                "value": "h2",
                "label": "H2"
              },
              {
                "value": "h3",
                "label": "H3"
              },
              {
                "value": "h4",
                "label": "H4"
              },
              {
                "value": "h5",
                "label": "H5"
              },
              {
                "value": "h6",
                "label": "H6"
              }
            ],
            "default":   "h3"
          }
        ]
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Use this text block to show store announcements, advertise products and collections, or simply welcome visitors to your store.</p>",
            "label": "Text"
          }
        ]
      },
      {
        "type": "button",
        "name": "Button",
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
          {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "options": [
              {
                "value": "solid",
                "label": "Solid"
              },
              {
                "value": "outline",
                "label": "Outline"
              },
              {
                "value": "link",
                "label": "Link"
              }
            ],
            "default": "solid"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Rich text",
        "blocks": [
          {
            "type": "heading"
          },
          {
            "type": "text"
          }
        ]
      }
    ]
  }
{% endschema %}
 